<template>
  <div>
    <!-- 文章列表 -->
    <div class="h1735">
      <div class="main">
        <div class="left">
          <div>
            <div class="title">{{ title }}</div>
            <!-- 文章列表 -->
            <li
              v-for="(item, index) in articleList"
              :key="index"
              class="article"
              @click="toArticleDetail(item)"
            >
              <div class="w202"><img v-lazy="item.imgur" alt="" /></div>
              <div class="content">
                <div class="fl">
                  <span class="latest">最新</span>
                  <span class="bt">{{ item.title }}</span>
                </div>
                <div class="txt">
                  {{ item.memo }}
                </div>
                <div class="ccc">{{ item.createDate | relativeTime }}</div>
              </div>
            </li>
            <!-- 分页器 -->
            <el-pagination
              large
              background
              :page-size="rows"
              layout="prev, pager, next"
              :total="total"
              :current-page="page"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>

        <div class="right" ref="fix" :class="fixed == true ? 'fixedBtn' : ''">
          <div class="h550" v-if="title !== '教研报告'">
            <div class="title">教研报告</div>
            <div class="containerlist">
              <div
                class="h82"
                @click="toArticleDetail(item)"
                v-for="(item, index) in kthyList"
                :key="index"
              >
                <div class="num">{{ index + 1 }}</div>
                <div class="txt">{{ item.title }}</div>
                <div class="showimg"><img v-lazy="item.imgur" alt="" /></div>
              </div>
            </div>
            <div class="more" @click="chakangengduo('1')">查看更多&gt;</div>
          </div>

          <div class="h550" v-if="title !== '学习经验分享'">
            <div class="title">学习经验分享</div>
            <div class="containerlist">
              <div
                class="h82"
                @click="toArticleDetail(item)"
                v-for="(item, index) in xxjyList"
                :key="index"
              >
                <div class="num">{{ index + 1 }}</div>
                <div class="txt">{{ item.title }}</div>
                <div class="showimg"><img v-lazy="item.imgur" alt="" /></div>
              </div>
            </div>
            <div class="more" @click="chakangengduo('2')">查看更多&gt;</div>
          </div>

          <div class="h550" v-if="title !== '最新文章'">
            <div class="title">最新文章</div>
            <div class="containerlist">
              <div
                class="h82"
                @click="toArticleDetail(item)"
                v-for="(item, index) in zxwzList"
                :key="index"
              >
                <div class="num">{{ index + 1 }}</div>
                <div class="txt">{{ item.title }}</div>
                <div class="showimg"><img v-lazy="item.imgur" alt="" /></div>
              </div>
            </div>
            <div class="more" @click="chakangengduo('3')">查看更多&gt;</div>
          </div>

          <!-- 广告投放 -->
          <!-- <div class="ad" v-show="currentPage === 'articleList'">
            <img src="" alt="" />
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import userUtils from '@/utils/userUtil'
import api from '@/config/api'
import { sendPost } from '@/utils/http'
// 引入侧边咨询链接组件
import Aside from '../aside'
export default {
  name: 'Community',
  data () {
    return {
      background: '#ff5e4e',
      // currentPage: 'articleList',
      articleList: [], // 资讯列表
      page: 1,
      rows: 10,
      pages: 0, //总页数
      total: 0,
      kthyList: [], // 考题回忆列表
      xxjyList: [], // 学习经验分享
      zxwzList: [],
      articleInfo: {}, // 文章详情
      isLogin: userUtils.isLogin(), // 判断是否登录
      title: '最新文章',
      type: "",
      fixed: false,
      newFlag: false,
      showType: ''
    }
  },
  mounted () {
    if (this.$route.query.type) {
      this.type = this.$route.query.type
    }

    this.getInformationList()
    this.getInformationByType()
    window.addEventListener('scroll', this.handleScroll);
  },
  created () {
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll () {
      console.log(document.documentElement.scrollTop);
      if (document.documentElement.scrollTop > 600) {
        this.fixed = true
      } else {
        this.fixed = false
      }
      if (document.documentElement.scrollTop > 2370) {
        // console.log(this.$refs.fix);
        this.$refs.fix.style = 'top:-80%'
      }
    },
    // 点击文章，去文章详情页
    toArticleDetail (info) {
      // console.log(info.id);
      if (this.isLogin) { // 登录的情况允许查看文章
        this.$router.push('/community/articleDetail?id=' + info.id)
      } else { // 未登录，去登录
        this.$router.push('login')
      }
    },
    getInformation (id) {
      sendPost(api.getInformation, { id: id }).then(res => {
        console.log(res);
        this.articleInfo = res.data
      })
    },
    // 根据分类获取资讯数据
    getInformationByType () {
      // 考题回忆列表
      sendPost(api.getInformationByType, {
        type: "1",
        offset: 0,
        limit: 5
      }).then(res => {
        // console.log(res);
        this.kthyList = res.data
      })

      // 学习经验分享
      sendPost(api.getInformationByType, {
        type: "2",
        offset: 0,
        limit: 5
      }).then(res => {
        // console.log(res);
        this.xxjyList = res.data
      })

      // 最新文章
      sendPost(api.getInformationList, {
        page: this.page,
        rows: 10,
        type: this.type,
      }).then(res => {
        console.log(res.data);
        this.zxwzList = res.data.list
      })
    },
    // 获取资讯列表
    getInformationList () {
      sendPost(api.getInformationList, {
        page: this.page,
        rows: 10,
        type: this.type,
      }).then(res => {
        // console.log(res.data);
        this.articleList = res.data.list
        this.total = res.data.total
      })
      this.showType = '2'
    },
    // 查看更多
    chakangengduo (type) {
      if (type) {
        if (type == '1') {
          this.title = "教研报告"
        }
        if (type == '2') {
          this.title = "学习经验分享"
        }
        if (type == '3') {
          this.title = "最新文章"
          this.getInformationList()
          // this.type='3'
        }
      }
      sendPost(api.getInformationList, {
        page: 1,
        rows: 10,
        type: type,
      }).then(res => {
        // console.log(res.data);
        this.articleList = res.data.list
        this.total = res.data.total
        this.page = 1
      })
    },
    // 当前页码发生改变时触发
    handleCurrentChange (value) {
      // console.log(value)
      this.page = value
      // console.log(value);
      this.getInformationList()
    },
  },
}
</script>

<style lang="less" scoped>
.fixedBtn {
  position: fixed; //固定定位
  z-index: 999;
  right: 5%;
  top: -60%;
}
.ovflh {
  overflow: hidden;
  /deep/image {
    width: 46.625rem;
  }
}
.h1735 {
  background-color: #fff;
  padding-bottom: 4.0625rem;
  .main {
    width: 75rem;
    margin: auto;
    display: flex;
    .left {
      width: 56.25rem;
      overflow: hidden;
      .title {
        height: 7.5rem;
        font-size: 2.5rem;
        line-height: 7.5rem;
      }
      .article {
        display: flex;
        margin-bottom: 2.5rem;
        cursor: pointer;
        .w202 {
          width: 12.625rem;
          height: 8.5rem;
          background-color: #c9c9c9;
          img {
            width: 12.625rem;
            height: 8.5rem;
          }
        }
        .content {
          padding: 0 1.25rem;
          padding-right: 7.5rem;
          box-sizing: border-box;
          .fl {
            display: flex;
            .latest {
              width: 3.125rem;
              height: 1.5rem;
              line-height: 1.5rem;
              color: #ff5e4e;
              border: 0.0625rem solid #ff5e4e;
              text-align: center;
            }
            .bt {
              font-size: 1.25rem;
              color: #333;
              font-weight: 600;
              margin-left: 0.9375rem;
              text-decoration: none;
              cursor: pointer;
            }
          }
          .txt {
            line-height: 1.5rem;
            color: #999;
            margin-top: 1.125rem;
            // padding-right: 12.5rem;
            box-sizing: border-box;
            height: 4rem;
            width: 100%;
          }
          .ccc {
            color: #ccc;
          }
        }
      }
      .article-detail {
        width: 46.625rem;
        .article-title {
          font-size: 2.125rem;
          margin-top: 3.125rem;
          height: 6.875rem;
          border-bottom: 0.0625rem solid #ededed;
          color: #333;
          display: flex;
          justify-content: space-between;
          .goback {
            font-size: 1.125rem;
            width: 6.25rem;
            height: 2.1875rem;
            line-height: 2.1875rem;
            background: #fffafa;
            border: 0.0625rem solid #ff5e4e;
            border-radius: 0.1875rem;
            text-align: center;
            color: #ff5e4e;
            margin: auto;
            margin-right: 0;
            cursor: pointer;
          }
        }
        .time {
          font-size: 1rem;
          color: #999;
          margin-top: 0.625rem;
        }
        .content {
          padding-top: 3.125rem;
          color: #333333;
          line-height: 2rem;
          font-size: 1rem;
          margin-bottom: 4.0625rem;
        }
        .article-img {
          width: 23rem;
          height: 30.25rem;
          margin: auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .right {
      flex: 1;
      height: 100%;
      margin-top: 6.25rem;

      .h550 {
        background-color: #fff;
        box-shadow: 1px 1px 10px 1px #ccc;
        padding: 0 10px;
        overflow: hidden;
        .title {
          height: 3.75rem;
          margin-top: 1.25rem;
          font-size: 1.125rem;
          color: #333;
          font-weight: bold;
          line-height: 3.75rem;
          border-bottom: 0.0625rem solid #ededed;
        }
        .containerlist {
          height: 15rem;
          overflow: hidden;
        }
        .h82 {
          height: 4.125rem;
          padding-top: 0.6rem;
          display: flex;
          cursor: pointer;

          .num {
            width: 1.4rem;
            height: 1.2rem;
            line-height: 1.25rem;
            text-align: center;
            border: 0.0625rem solid #999;
            color: #999;
            border-radius: 0.1875rem;
            margin-top: 0.3125rem;
          }
          .txt {
            margin-left: 0.9375rem;
            line-height: 1.75rem;
            height: 3.125rem;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #666;
            width: 11.25rem;
          }
          .showimg {
            margin-left: 1.25rem;
            width: 5.375rem;
            height: 3.625rem;
            background-color: #c9c9c9;
            img {
              width: 100%;
              height: 100%;
              vertical-align: middle;
            }
          }
        }
        .more {
          background-color: #ededed;
          height: 3.125rem;
          line-height: 3.125rem;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          width: 100%;
          color: #666;
          margin-top: 1rem;
          cursor: pointer;
          margin-bottom: 0.625rem;
        }
      }
      .ad {
        height: 19.625rem;
        background-color: #ffa800;
        margin-top: 3.125rem;
      }
    }
  }
}
.footer[data-v-55b6dd10] {
  margin-top: 0;
}

/deep/.el-pagination button,
.el-pagination span:not([class*="suffix"]) {
  display: inline-block;
  font-size: 0.8125rem;
  min-width: 2.21875rem;
  height: 2.5rem;
  line-height: 2.5rem;
  vertical-align: top;
  box-sizing: border-box;
}
/deep/.el-pager li {
  padding: 0 0.25rem;
  font-size: 0.9375rem;
  min-width: 2.21875rem;
  height: 2.5rem !important;
  width: 2.5rem;
  line-height: 2.5rem;
  box-sizing: border-box;
  text-align: center;
}
::v-deep {
  .el-pagination.is-background .el-pager li:not(.disabled) {
    background-color: #fff; // 进行修改未选中背景和字体
    // color: #fff;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #ff5e4e; // 进行修改选中项背景和字体
    color: #fff;
  }
}
.el-pagination {
  font-size: 1.25rem;
  text-align: center;
  padding-top: 5rem;
}
</style>
